<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Generate tree using dataset</title>

  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/tree/compat/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/form/default/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/button/default/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    .TreeContainer
    {
      float: left;
    }
    .Basis-Tree
    {
      border: 1px solid #AAA;
      width: 240px;
      height: 300px;
      overflow: auto;
      overflow-y: scroll;
      overflow-x: hidden;
      margin-right: 10px;
    }

    .form-content
    {
      overflow: hidden;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basis Demos: Generate tree using dataset</h1>

  <p id="demo-summary">
    ...
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container">
    <div id="fileTreeContainer" class="TreeContainer">
      <h2>File tree</h2>
    </div>
    
    <div id="lazyFileTreeContainer" class="TreeContainer">
      <h2>Lazy file tree</h2>
    </div>
  </div>

  <script id="demo-javascript" type="text/javascript">

    var DOM = basis.dom;
    var nsData = basis.data;
    var nsEntity = basis.entity;
    var nsUI = basis.ui;
    var nsTree = basis.ui.tree;

    //
    // DATA
    //

    var files = [
      { path: '/', name: 'basis.js' },
      { path: '/', name: 'dom_wrapper.js' },
      { path: '/', name: 'data.js' },
      { path: '/', name: 'entity.js' },
      { path: '/demo/', name: 'index.html' },
      { path: '/demo/', name: 'demo.js' },
      { path: '/demo/data/', name: 'generate_tree.html' },
      { path: '/demo/data/', name: 'live_edit.html' },
      { path: '/docs/', name: 'index.html' },
      { path: '/docs/resources/', name: 'script.js' }
    ];

    var folders = [
      { path: '/', name: 'docs' },
      { path: '/', name: 'style' },
      { path: '/', name: 'demo' },
      { path: '/demo/', name: 'data' },
      { path: '/demo/', name: 'defile' },
      { path: '/docs/', name: 'resources' }
    ];

    //
    // DATA TYPES AND DATASET
    //

    var File = new nsEntity.EntityType({
      fields: {
        path: String,
        name: String
      }
    });

    var Folder = new nsEntity.EntityType({
      fields: {
        path: String,
        name: String
      }
    });

    files.forEach(File);
    folders.forEach(Folder);

    var goupingByParentId = new nsData.dataset.Split({
      source: new nsData.dataset.Merge({
        sources: [
          Folder.all,
          File.all
        ]
      }),
      rule: function(object){
        return object.data.path;
      }
    });

    //
    // CLASSES
    //
   
    var grouping = {
      childClass: nsUI.PartitionNode,
      groupGetter: function(node){
        return node instanceof nsTree.Folder == false;
      },
      sorting: Function.getter('data.id')
    };

    var FolderNode = basis.Class(nsTree.Folder, {
      binding: {
        title: 'data:name'
      },
      sorting: Function.getter('data.name'),
      grouping: grouping,
      init: function(config){
        nsTree.Node.prototype.init.call(this, config);
        this.setDataSource(goupingByParentId.getSubset(this.data.path + '' + this.data.name + '/'))
      }
    });

    var LazyFolderNode = basis.Class(nsTree.Folder, {
      binding: {
        title: 'data:name'
      },
      sorting: Function.getter('data.name'),
      grouping: grouping,
      collapsed: true,
      event_expand: function(){
        nsTree.Folder.prototype.event_expand.call(this);
        this.setDataSource(goupingByParentId.getSubset(this.data.path + '' + this.data.name + '/'))
      }
    });

    var FileNode = basis.Class(nsTree.Node, {
      binding: {
        title: 'data:name'
      }
    });

    var FileTree = basis.Class(nsTree.Tree, {
      dataSource: goupingByParentId.getSubset('/'),
      sorting: Function.getter('data.name'),
      grouping: grouping,
      childFactory: function(config){
        if (config.delegate.type == Folder)
          return new FolderNode(Object.extend({ childFactory: this.childFactory }, config));
        else
          return new FileNode(config);
      }
    });

    //
    // TREES
    //

    var tree = new FileTree({
      container: document.getElementById('fileTreeContainer')
    });

    var lazyTree = new FileTree({
      container: document.getElementById('lazyFileTreeContainer'),
      childFactory: function(config){
        if (config.delegate.type == Folder)
          return new LazyFolderNode(Object.extend({ childFactory: this.childFactory }, config));
        else
          return new FileNode(config);
      }
    });


  </script>  
</body>

</html>
